/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-10-10 16:38:38
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-25 12:56:51
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\graph\index.tsx
 * @Description: 
 */
import React from 'react';
import { Space, Table, Tag, Button } from 'antd';
import type { TableProps } from 'antd';
import Search from './search';
import styles from './list.module.scss'
import { useNavigate } from 'react-router-dom';

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}


const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];

const App: React.FC = () => {
    const router = useNavigate()
    const handleAddItem = (record: any, rowIndex: any, key: string) => {
        console.log('add item', record, rowIndex, key);
        if (key === 'detail' || key === 'edit') {
            router(
                `/graph/${record.key}`,
                { state: { id: record.key, status: key } }
            )
        }
    }
    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record, index) => (
                <Space size="middle" className={styles.buttonsText}>
                    {/* <a>Invite {record.name}</a>
                    <a>Delete</a> */}
                    <Button onClick={() => handleAddItem(record, index, 'detail')} size='small'>详情</Button>
                    <Button onClick={() => handleAddItem(record, index, 'edit')} color="primary" size='small' variant="filled">编辑</Button>
                    <Button onClick={() => handleAddItem(record, index, 'delete')} color="danger" size='small' variant="filled">删除</Button>
                </Space>
            ),
        },
    ];
    const handeClickAddItem = () => {
        console.log('add item');
    }
    return (
        <div>
            <Search handeAddItem={handeClickAddItem} />
            <Table<DataType>
                columns={columns}
                dataSource={data}
            />
        </div>
    );
};


export default App;
